<!-- 基于 element-plus 的 el-pagination 简单封装，方便统一 -->
<template>
  <el-pagination
    v-show="page?.totalCount > 0"
    v-model:current-page="page.pageCurrent"
    v-model:page-size="page.pageSize"
    :background="true"
    :page-sizes="[10, 20, 50, 100, 200]"
    :total="page.totalCount"
    layout="total, sizes, prev, pager, next, jumper"
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
  />
</template>
<script setup>
  import { computed } from 'vue'

  const props = defineProps({
    page: {
      type: Object,
      default: () => {}
    }
  })

  const emit = defineEmits(['update:page', 'pagination'])
  const page = computed({
    get() {
      return props.page
    },
    set(val) {
      emit('update:page', val)
    }
  })

  const handleSizeChange = (val) => {
    if (page.value.pageCurrent * val > page.value.totalCount) {
      page.value.pageCurrent = 1
    }
    emit('pagination')
  }
  const handleCurrentChange = () => {
    emit('pagination')
  }
</script>
<style lang="scss" scoped>
  .el-pagination {
    margin-top: 20px;
    justify-content: center;
  }
</style>
